import React from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Guide } from 'bizcharts';
import DataSet from '@antv/data-set';

export default class Donut extends React.Component {
  render() {
    const { DataView } = DataSet;
    const data = [
      {
        item: '事例一',
        count: 40,
      },
      {
        item: '事例二',
        count: 21,
      },
      {
        item: '事例三',
        count: 17,
      },
      {
        item: '事例四',
        count: 13,
      },
      {
        item: '事例五',
        count: 9,
      },
    ];
    const dv = new DataView();
    dv.source(this.props.data).transform({
      type: 'percent',
      field: 'dbLeTypeCount',
      dimension: 'dbLeTypeName',
      as: 'percent',
    });
    const cols = {
      percent: {
        formatter: val => {
          val = (val * 100).toFixed(2) + '%';
          return val;
        },
      },
    };
    return (
      <div>
        <Chart height={300} data={dv} scale={cols} padding="auto" forceFit placeholder>
          <Coord type={'theta'} radius={0.75} innerRadius={0.6} />
          <Axis name="percent" />
          <Tooltip
            showTitle={false}
            itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}，{dbLeTypeCount}台</li>'
          />
          <Guide>
            <Guide.Text
              position={['50%', '50%']}
              style={{ fontSize: 30, textAlign: 'center' }}
              content={`${this.props.data.reduce(
                (accumulator, item) => accumulator + item.dbLeTypeCount,
                0
              )}台`}
            />
          </Guide>
          <Geom
            type="intervalStack"
            position="percent"
            color="dbLeTypeName"
            tooltip={[
              'dbLeTypeName*percent*dbLeTypeCount',
              (dbLeTypeName, percent, dbLeTypeCount) => {
                percent = (percent * 100).toFixed(2) + '%';
                return {
                  name: dbLeTypeName,
                  value: percent,
                  dbLeTypeCount: dbLeTypeCount,
                };
              },
            ]}
            style={{
              lineWidth: 1,
              stroke: '#fff',
            }}
          >
            <Label
              content="percent"
              formatter={(val, dbLeTypeName) => {
                return dbLeTypeName.point.dbLeTypeName + '： ' + val;
              }}
            />
          </Geom>
        </Chart>
      </div>
    );
  }
}
